<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="修改用户信息"
    :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="楼盘名称" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="房源类型" :label-width="formLabelWidth">
        <el-input v-model="form.type" autocomplete="off" />
      </el-form-item>
      <el-form-item label="门牌号" :label-width="formLabelWidth">
        <el-input v-model="form.num" autocomplete="off" />
      </el-form-item>
      <el-form-item label="房源户型" :label-width="formLabelWidth">
        <el-input v-model="form.hometype" autocomplete="off" />
      </el-form-item>
      <el-form-item label="户主" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogForm('取消')">取消</el-button>
        <el-button type="primary" @click="dialogForm(' 提交')">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import apiUrl from "../api/urls";
import link from "../api/link";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

//路由
const router = useRouter();

//全局状态
const store = useStore();

const dialogTableVisible = ref(false);
//弹窗显示
const dialogFormVisible = ref(false);

const formLabelWidth = "140px";
console.log();

//表单数据
const form = reactive<any>({
  title: "",
  type: "",
  num: "",
  hometype: "",
  name: "",
});

//数据更新
const dialogForm = (nums) => {
  store.commit("changeform", false);
  // console.log(form);
  if (nums === "提交") {
    let data = {
      title: form.title,
      type: form.type,
      num: form.num,
      hometype: form.hometype,
      name: form.name,
    };
    link(apiUrl.userlist + "/" + store.state.userid, "PUT", data).then(
      (res: any) => {
        console.log(res);
        router.go(0);
      }
    );
  }
};
const handleClose = () => {
  store.commit("changeform", false);
};

watch(
  () => store.state.dialogForms,
  (navl) => {
    dialogFormVisible.value = navl;
  }
);
</script>
    <style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>